<template>
  <section class="component create-bill">
    <el-form :rules="creatBillRules" :model="model" ref="create-bill" label-width="100px">
      <el-form-item label="委外方" prop="outsourceId">
        <!-- <el-select v-model="model.outsourceId" placeholder="请选择" clearable>
          <el-option v-for="item in outSourceList" :key="item.id" :label="item.outsName" :value="item.id"></el-option>
        </el-select> -->
        <select-department :specialOptions="specialOptions" v-model="model.outsourceId"></select-department>
      </el-form-item>
      <el-form-item label="批次号" prop="batchNumber">
        <el-select v-model="model.batchNumber" placeholder="请选择" clearable>
          <el-option v-for="item in batchNumberSet" :key="item" :value="item" :label="item"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="content" v-if="model.outsourceId && model.batchNumber">
      <p>{{content.outsourceName}}，总案件数：{{content.caseSum}}条。</p>
      <p>对账成功{{content.billSuccessSum}}条，对账失败{{content.billFailSum}}条，未对账{{content.caseSum-content.billFailSum-content.billSuccessSum}}条。</p>
    </div>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { CompanyService } from '~/services/management-service/company.service';
import { Emit, Watch, Prop } from 'vue-property-decorator';
import { State } from 'vuex-class';
import { OutsourceReconciliationManageService } from '~/services/domain-service/outsource-reconciliation-manage.service';
import SelectDepartment from "~/components/business-component/select-department.vue";
import { CommonService } from "~/utils/common.service";
import { OutsourceService } from "~/services/domain-service/outsource.service";

@Component({
  components: {
    SelectDepartment
  }})
export default class CreateBill extends Vue {
  @Dependencies(OutsourceReconciliationManageService)
  private outsourceReconciliationManageService: OutsourceReconciliationManageService;
  @Dependencies(OutsourceService) private outsourceService: OutsourceService;

  @State private outSourceList;

  private model: any = {
    batchNumber: '',
    outsourceId: ''
  };
  private specialOptions:any[] = []
  private creatBillRules: any = {
    outsourceId: [{ required: true, message: '请选择受托方', trigger: 'blur' }],
    batchNumber: [{ required: true, message: '请选择批次号', trigger: 'blur' }],
  };

  // 下拉选批次号
  private batchNumberSet: any[] = [];
  private content: any = {
    outsourceName: '',
    caseSum: '',
    billSuccessSum: '',
    billFailSum: '',
    unbillSum: ''
  }


  @Emit('refreshData')
  private refreshData() {}
  @Emit('close')
  private close() {

  }
  //获取委外部门不包括律所
  private getOuterSource() {
    this.outsourceService.getOuterSource().subscribe(
      data =>{ this.specialOptions = CommonService.generateTreeData(data, {
        keyName: 'id',
        parentKeyName: 'parentId'
      })
      // data =>{console.log(data,"data")
    })
  }
  private mounted(){
    this.getOuterSource()
  }
  @Watch('model.outsourceId', {immediate: true})
  private refreshBatchNumber() {
    this.batchNumberSet.length = 0
    //切换受托方后清空batchnumber
    this.model.batchNumber='';
    if (!this.model.outsourceId) {
      this.model.batchNumber = ''
      return
    }
    this.content.outsourceName = this.outSourceList.find(v => v.id === this.model.outsourceId).outsName
    this.outsourceReconciliationManageService.selectBatchNumberList({outsourceId: this.model.outsourceId}).subscribe(
      data => this.batchNumberSet = data
    )
  }

  @Watch('model.batchNumber', {immediate: true})
  private refreshContent() {
    if (this.model.batchNumber) {
      this.outsourceReconciliationManageService.caseStatistics(this.model).subscribe(
        (data) => {
          this.content.caseSum = data.distributeNumber || 0
          this.content.billSuccessSum = data.successNumber || 0
          this.content.billFailSum = data.failureNumber || 0
          this.content.unbillSum = data.unCheckNumber || 0
        }
      )
    }
  }

  /**
   * 确认对账
   */
  private commit() {
    const form: any = this.$refs['create-bill']
    form.validate((valid) => {
      if (!valid) return
      const param = {batchNumber: this.model.batchNumber, outId: this.model.outsourceId}
      this.outsourceReconciliationManageService.generatingBill(param).subscribe(
        (data) => {
          this.$message.success('生成账单成功')
          this.close()
          this.refreshData()
        }
      );
    });
  }

  private refresh() {
    const form: any = this.$refs['create-bill']
    form.resetFields()
  }
}
</script>

<style lang="less" scoped>
.component.create-bill{
  .content{
    margin-left: 40px;
  }
}
</style>
